<template>
  <div class="news-list">
    <div v-for="item in news" :key="item.id" class="news-item" @click="handleNewsClick(item)">
      <div class="news-title">
        <span v-if="item.isNew" class="new-badge">NEW</span>
        {{ item.title }}
      </div>
      <div class="news-date">{{ item.date }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "NewsList",
  props: {
    news: {
      type: Array,
      required: true,
    },
  },
  methods: {
    handleNewsClick(newsItem) {
      // 如果消息未读，先标记为已读
      if (newsItem.isNew) {
        newsItem.isNew = false;
      }

      // 跳转到消息详情页面
      this.$router.push(`/notify/detail/${newsItem.id}`);
    },
  },
};
</script>

<style scoped>
.news-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.news-item {
  padding: 8px 0;
  border-bottom: 1px dashed #ebeef5;
  cursor: pointer;
}

.news-item:last-child {
  border-bottom: none;
}

.news-item:hover {
  background-color: #f5f7fa;
}

.news-title {
  font-size: 14px;
  margin-bottom: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-date {
  font-size: 12px;
  color: #999;
}

.new-badge {
  display: inline-block;
  padding: 0 4px;
  background-color: #f56c6c;
  color: white;
  font-size: 12px;
  border-radius: 4px;
  margin-right: 6px;
}
</style>